<template>
	<view >
		<u-navbar
		:autoBack="true" bgColor="var(--theme)"
		leftIconColor='#fff'
		:titleStyle="{ color: '#fff'}"
		 title="编辑资料" rightText='' :border="false" :placeholder="true">
			 
		</u-navbar>
		 <view class="headBg">
		 	 <view class="f-c">
		 	 	 <u-avatar src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/head.png"  size="68"></u-avatar>
		 	 </view>
		 </view>
		 <view class="m20 b-rd b-s bf" style="margin-top: -200rpx;">
		 	<view class="f p20 b-b">
				<image class="mr20" src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/name.png" style="width: 40rpx;" mode="widthFix"></image>
		 		<span class="mr100 c6">昵称</span>
				<u--input
				    placeholder="请输入名称"
				    border="none"
				    v-model="userInfo.name"
				    
				  ></u--input>
		 	</view>
			<view class="f p20 b-b">
				<image class="mr20" src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/card.png" style="width: 40rpx;" mode="widthFix"></image>
				<span class="mr100 c6">性别</span>
				<u--input
				    placeholder="请输入"
				    border="none"
				    v-model="userInfo.sex"
				    
				  ></u--input>
			</view>
			<view class="f p20 b-b">
				<image class="mr20" src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/birth.png" style="width: 40rpx;" mode="widthFix"></image>
				<span class="mr100 c6">生日</span>
				<u--input
				    placeholder="请输入"
				    border="none"
				    v-model="userInfo.birth"
				    
				  ></u--input>
			</view>
			<view class="f p20">
				<image class="mr20" src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/position.png" style="width: 40rpx;" mode="widthFix"></image>
				<span class="mr100 c6">所在地</span>
				<u--input
				    placeholder="请输入"
				    border="none"
				    v-model="userInfo.address"
				    
				  ></u--input>
				  <image class="mr20" src="https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/pos2.png" style="width: 30rpx;" mode="widthFix"></image>
				  
			</view>
		 </view>
		 <view class="outBtn" @click="toLogout()">退出登录 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:{
					name:'菜狗一号',
					sex:'男',
					birth:'2000.10.10',
					address:'安徽省 合肥市 庐阳区'
				}
			}
		},
		onShow() {
			// uni.hideBackButton()
		},
		mounted() {
			  var backbutton = document.getElementsByClassName('uni-page-head-btn')[0]
			  if(backbutton) backbutton.style.backgroundColor = 'rgb(0,0,0,0)';
		},
		methods: {
			//退出登录
			toLogout(){
				uni.showModal({
				  content: '确定要退出登录么',
				  success: (e)=>{
					if(e.confirm){
					  // this.logout();
					  uni.removeStorageSync("addresses")
					  uni.removeStorageSync("userInfo")
					  setTimeout(()=>{
						uni.switchTab({
						  url:"../index/index"
						})
					  }, 200)
					}
				  }
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		// padding-top: 16upx;
		display: flex;
		flex-direction: column;
		::v-deep  .uni-page-head-btn  {
			background-color: #000 !important;
		}
	}
    .headBg{
		background-image: url('https://chaoyuanhuishou.oss-cn-beijing.aliyuncs.com/homebg.png');
		background-size: 100% 100%;
		// width: 750rpx;
		height: 378rpx;
		// background: #1AC388;
		border-radius: 0rpx 0rpx 40rpx 40rpx;
		opacity: 1;
	}
	.outBtn{
		position: fixed;
		bottom: 200rpx;
		left: 50%;
		transform: translate(-50%,0);
		width: 700rpx;
		height: 88rpx;
		background: #F14647;
		box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0,0,0,0.16);
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		opacity: 1;
		text-align: center;
		line-height: 88rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
	}
	
	
	
</style>
